<%--
  Created by IntelliJ IDEA.
  User: kurong
  Date: 2021/10/11
  Time: 14:06
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="${pageContext.request.contextPath}/res/jquery/jquery-3.5.1.js"></script>
    <script src="${pageContext.request.contextPath}/res/jquery/ajaxfileupload.js"></script>
</head>
<body>
<%--
enctype:
    application/x-www-form-urlencoded: 普通文本编码，不能用于文件
    multipart/form-data： 用于文件上传（二进制）将文件以二进制的形式上传

    method="post"
    enctype="multipart/form-data"
--%>
<h1>文件上传</h1>
<form action="${pageContext.request.contextPath}/uploadSingleFile" method="post" enctype="multipart/form-data" >
    <input type="file" name="myfile">
    <input type="submit" value="submit">
</form>

<h1>ajax文件上传，使用ajaxFileUpload 插件</h1>
<form  method="post" enctype="multipart/form-data" class="imageForm">
    <input type="file" name="myimage" class="myimage" id="myimage">
    <input type="button" value="提交" class="submitBtn">
</form>

<div class="preImg" style="display: none">  </div>

<script>
    $(".submitBtn").click(function (){


        var url = "${pageContext.request.contextPath}/uploadSingleFileAjax";
        var myimage = $(".imageForm").serialize();

        $.ajaxFileUpload({
            url:url,
            dataType:"application/json",
            secureuri:false,//是否启用安全机制
            fileElementId:'myimage',
            success:function (result){
                console.log("result:" + result);
                console.log("result:" + JSON.stringify(result));
                var imgpath = "${pageContext.request.contextPath}" +"//"+result;

                $(".preImg").show();
                $(".preImg").html("");
                var imgEle = ' <img src="'+imgpath+' " width="200px" height="200px">';
                $(".preImg").append(imgEle);
            }
        } )





    }) ;
</script>

</body>
</html>
